import type { Ref } from 'vue';

/**
 * 全屏
 * @param targetRef 全屏目标元素
 * @param fullScreen 是否全屏
 */
export function useFullScreen(targetRef: Ref, fullScreen: Ref) {
	watch(fullScreen, (newVal) => {
		console.log('newVal', newVal);
		if (newVal) {
			targetRef.value && targetRef.value.requestFullscreen();
		} else if (document.fullscreenElement) {
			try {
				document.exitFullscreen && document.exitFullscreen();
			} catch (error) {
				fullScreen.value = true;
			}
		}
	});
	onMounted(async () => {
		await nextTick();
		window.addEventListener('resize', () => {
			if (!checkFull()) {
				// 要执行的动作
				if (fullScreen.value) {
					fullScreen.value = false;
				}
			}
		});
	});

	const checkFull = () => {
		var isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
		if (isFull === undefined) isFull = false;
		return isFull;
	};
}
